<template>
  <div style="width: 100%">
    <el-row style="background-color: #363fe5; height: 80px; width: 100%">
      <el-col :md="12" :sm="12">
        <el-row>
          <el-col :md="8" :sm="8" class="box">
            <label style="color: white; font-size: 40px">BigData</label>
          </el-col>
          <el-col :md="4" :sm="4" class="box"
            ><label class="nav-head" @click="toIndex">主页</label></el-col
          >
          <el-col :md="4" :sm="4" class="box"
            ><label class="nav-head" v-show="isLogin" @click="toExpr"
              >实验</label
            ></el-col
          >
          <el-col :md="4" :sm="4" class="box"
            ><label class="nav-head" v-show="isLogin" @click="toItem"
              >项目</label
            ></el-col
          >
        </el-row>
      </el-col>
      <el-col :md="12" :sm="12" class="box">
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          style="width: 300px"
        >
          <template slot="append"
            ><el-button type="primary" icon="el-icon-search" @click="search"
              >搜索</el-button
            ></template
          >
        </el-input>
        <label
          class="nav-head"
          @click="showLogin"
          v-if="!isLogin"
          >登录</label
        >
        <el-dropdown @command="handleCommand" v-else>
          <span class="el-dropdown-link">
            <label class="nav-head" @click="showUser">{{ user.username }}</label
            ><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="editpw" v-show="isLogin"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item command="exit" v-show="isLogin"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <label class="nav-head" @click="toAdmin"
          >后台管理</label
        >
      </el-col>
    </el-row>
    <!-- 登录弹出框 -->
    <el-dialog title="登录" :visible.sync="loginFormVisible">
      <el-form>
        <el-form-item label="账号">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="user.password"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="showRegister">注册</el-button>
        <el-button @click="loginFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="login">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 注册弹出框 -->
    <el-dialog title="注册" :visible.sync="registerFormVisible">
      <el-form>
        <el-form-item label="账号">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="user.password"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registerFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹出修改密码框 -->
    <el-dialog title="修改密码" :visible.sync="editPasswdVisible">
      <el-form>
        <el-form-item label="旧密码">
          <el-input
            type="password"
            v-model="editUserObj.password"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            type="password"
            v-model="editUserObj.newPassword"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            type="password"
            v-model="editUserObj.reNewPassword"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editPasswdVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPasswd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logo: require("@/assets/images/logo02.png"),
      isLogin: false,
      //   当前登录对象
      user: {
        username: "游客",
      },
      //   密码修改对象
      editUserObj: {
        username: "",
        password: "",
        newPassword: "",
        reNewPassword: "",
      },
      // 登录弹框是否显示
      loginFormVisible: false,
      // 修改密码弹框是否显示
      editPasswdVisible: false,
      // 注册页面弹出框
      registerFormVisible: false,
      // 搜索关键词
      keyword: "",
    };
  },
  methods: {
    // 显示登录弹框
    showLogin() {
      this.loginFormVisible = true;
    },
    // 显示修改密码弹框
    showEditPasswd() {
      this.editPasswdVisible = true;
    },
    // 显示注册弹框
    showRegister() {
      this.loginFormVisible = false;
      this.registerFormVisible = true;
    },
    // 发送登录请求
    login() {
      this.$http({
        url: "/user/login",
        method: "post",
        data: this.user,
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: response.data.message,
              type: "success",
            });
            this.loginFormVisible = false;
            this.isLogin = true;
            this.editUserObj.username = this.user.username;
          } else {
            this.$message({
              message: response.data.message,
              type: "error",
            });
            return;
          }
        })
        .catch((err) => err);
    },
    // 发送注册请求
    register() {
      this.$http({
        url: "/user/register",
        method: "post",
        data: this.user,
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: response.data.message,
              type: "success",
            });
            this.registerFormVisible = false;
            this.isLogin = true;
            this.editUserObj.username = this.user.username;
          } else {
            this.$message({
              message: response.data.message,
              type: "error",
            });
            return;
          }
        })
        .catch((err) => err);
    },
    // 发送修改密码请求
    editPasswd() {
      if (this.editUserObj.newPassword != this.editUserObj.reNewPassword) {
        this.$message({ message: "两次密码不一致", type: "error" });
        return;
      } else {
        this.$http({
          url: "/user/editPassword",
          method: "post",
          data: this.editUserObj,
        })
          .then((response) => {
            this.$message({
              message: response.data.message,
              type: "success",
            });
            // 修改完毕隐藏弹框
            this.editPasswdVisible = false;
          })
          .catch((err) => err);
      }
    },
    // 显示用户信息
    showUser() {
      if (!this.isLogin) {
        this.$message({
          message: "请先登录",
          type: "error",
        });
      } else {
        // 跳转到用户界面
        this.$router.push("/user").catch((err) => err);
      }
    },
    // 退出登录
    exitLogin() {
      this.user = { username: "游客" };
      this.isLogin = false;
      this.$router.push("/first").catch((err) => err);
      this.$message({
        message: "已退出登录！",
        type: "success",
      });
    },
    // 执行下拉菜单的指令
    handleCommand(command) {
      if (command == "editpw") {
        this.showEditPasswd();
      }
      if (command == "exit") {
        this.exitLogin();
      }
    },
    // 跳转到主页
    toIndex() {
      this.$router.push("/first").catch((err) => err);
    },
    // 跳转到实验页
    toExpr() {
      this.$router.push("/expr").catch((err) => err);
    },
    // 跳转到项目页
    toItem() {
      this.$message({
        message: "项目模块暂未开通",
        type: "warning",
      });
      // this.$router.push("/item").catch((err) => err);
    },
    // 跳转到后台管理
    toAdmin() {
      this.$router.push("/admin").catch((err) => err);
    },
    // 检索功能
    search() {
      this.$message({
        message: "搜索功能暂未开通",
        type: "warning",
      });
    },
  },
  mounted() {
    this.editUserObj.username = this.user.username;
    this.user.username = "张三";
    this.user.password = "12";
    this.login();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.nav-head {
  color: white;
  text-align: center;
}
.box {
  height: 80px;
  line-height: 80px;
  /* width: 100px; */
  overflow: hidden;
}
.el-dropdown {
  font-size: 16px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>